“Enros” Documentation by “TeamXcel” v1.0


“Enros”

Created:10/04/2019
By: TeamXcel


Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!


Table of Contents

  1. HTML Structure
  2. Template Components
  3. CSS Files and Structure
  4. JavaScript
  5. PSD Files
  6. Sources and Credits

A) HTML Structure - top

Below is the general HTML structure of the landing page.

1) index.html File Structure - top

The landing page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, portfolio section you can showcase your portfolio with awesome animation, team section is for your team members, testimonial section here you can published your customer reviews, contact section here you can put your contact information & footer that show copyright information.

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="Bitcoin & Cryptocurrency landing page">
        <meta name="author" content="TeamXcel">
       
        <title>Enros | Bitcoin & Cryptocurrency Landing Page</title>
        
		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
		
		<!-- Font Awesome CSS -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <!-- Themify Icons CSS -->
        <link rel="stylesheet" href="css/themify-icons.css">
        <!-- Elegant Font Icons CSS -->
        <link rel="stylesheet" href="css/elegant-font-icons.css">
        <!-- Elegant Line Icons CSS -->
        <link rel="stylesheet" href="css/elegant-line-icons.css">
		<!-- Bootstrap CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- Slicknav CSS -->
        <link rel="stylesheet" href="css/slicknav.min.css">
        <!-- animate CSS -->
        <link rel="stylesheet" href="css/animate.min.css">
		<!-- OWL-Carousel CSS -->
        <link rel="stylesheet" href="css/owl.carousel.css">
		<!-- Main CSS -->
        <link rel="stylesheet" href="css/main.css">
		<!-- Responsive CSS -->
        <link rel="stylesheet" href="css/responsive.css">

        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
    </head>
    <body data-spy="scroll" data-target="#navmenu" data-offset="70">
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        
        <div id='preloader' >
            <div class='loader' >
                <img src="img/preloader.gif" width="50" alt="">
            </div>
        </div><!-- Preloader -->
        
        <header id="header" class="header-section">
            <div class="container">
                
            </div>
		</header> <!-- /.header-section -->
		
		<section id="home" class="hero-section d-flex align-items-center">
            <div class="bg-shape"></div>
            <div class="container">
                
            </div>
        </section><!-- /.hero-section -->
		
        <section id="services" class="services-section padding pd-top-none">
            <div class="container">
                
            </div>
        </section><!-- /.service-section -->
        
        <section id="about" class="content-section padding pd-top-none">
           <div class="bg-shape"></div>
            <div class="container">
                
            </div>
        </section><!-- /.content-section -->
        
        <section class="work-process padding pd-top-none">
            <div class="container">
                
            </div>
        </section><!-- /.work-process -->
        
        <section class="content-section padding pd-top-none">
            <div class="container">
                
            </div>
        </section><!-- /.content-section --> 
        
        <section id="reviews" class="testimonial-section padding pd-top-none">
            <div class="bg-shape"></div>
            <div class="container">
                
            </div>
        </section><!-- /.testimonial-section -->
        
        <section id="download" class="download-section">
            <div class="bg-shape"></div>
            <div class="container">
                
            </div>
        </section><!-- /.download-section -->
        
        <div class="sponsor-section padding">
            <div class="container">
                
            </div>
        </div><!-- /.sponsor-section -->
        
        <section class="subscribe-section padding">
           <div class="bg-shape"></div>
            <div class="container">
                
            </div>
        </section><!-- /.suubscribe-section -->
        
        <section class="widget-section bd-bottom padding">
            <div class="container">
                
            </div>
        </section><!-- /.widget-section -->
        
		    
		<footer class="footer-section align-center">
			<div class="container">
			</div>
		</footer><!-- /.footer-section -->

		<a data-scroll href="#header" id="scroll-to-top"><i class="arrow_carrot-up"></i></a><!-- /#scroll-to-top -->
	
		<!-- jQuery Lib -->
		<script src="js/vendor/jquery-1.12.4.min.js"></script>
		<!-- Bootstrap JS -->
		<script src="js/vendor/bootstrap.min.js"></script>
		<!-- Tether JS -->
		<script src="js/vendor/tether.min.js"></script>
		<!-- Slicknav JS -->
		<script src="js/vendor/jquery.slicknav.min.js"></script>
		<!-- OWL-Carousel JS -->
		<script src="js/vendor/owl.carousel.min.js"></script>
		<!-- Smooth Scroll JS -->
		<script src="js/vendor/smooth-scroll.min.js"></script>
		<!-- Ajaxchimp JS -->
		<script src="js/vendor/jquery.ajaxchimp.min.js"></script>
		<!-- Wow JS -->
		<script src="js/vendor/wow.min.js"></script>
		<!-- Main JS -->
		<script src="js/main.js"></script>

    </body>
</html>
        

B) Template Components - top

The site is made of many sections like header, slider, testimonials, services and more...

1) Header Section - top

<header id="header" class="header-section">
	<div class="container">
		<nav class="navbar">
			<a href="#" class="navbar-brand"><img src="img/logo-dark.png" alt="Enros"></a><!-- /.navbar-brand -->
			<div class="d-flex menu-wrap">
			   <div id="navmenu" class="mainmenu">
				   <ul class="nav">
						<li ><a data-scroll class="nav-link active" href="#home">Home <span class="sr-only">(current)</span></a></li>
						<li><a data-scroll class="nav-link" href="#services">Services</a></li>
						<li><a data-scroll class="nav-link" href="#about">About</a></li>
						<li><a data-scroll class="nav-link" href="#reviews">Review</a></li>
						<li><a data-scroll class="nav-link" href="#download">Download App</a></li>
						<li><a href="#" class="signup-btn">Signup</a></li>
					</ul>
			   </div>
			</div><!-- /.menu-wrap -->
		</nav><!-- /.navbar -->
	</div>
</header> <!-- /.header-section -->

2) Hero Section - top


<section id="home" class="hero-section d-flex align-items-center">
	<div class="bg-shape"></div>
	<div class="container">
		<div class="row hero-wrap">
			<div class="col-md-6 xs-padding">
				<div class="hero-content">
					<h1>Invest in cryptocoin <br>easy way to trade bitcoin.</h1>
					<p>Launch your campaign and benefit from our expertise on designing and <br>managing conversion centered landing pages.</p>
					<a href="#" class="default-btn">Get Started Now</a>
				</div>
			</div><!-- Content -->
			<div class="col-md-6 xs-padding">
				<div class="hero-img">
					<img src="img/hero-img.png" alt="Hero Img">
				</div>
			</div><!-- Image -->
		</div><!-- /.row.hero-wrap -->
	</div>
</section><!-- /.hero-section -->

3) Services Section - top


<section id="services" class="services-section padding pd-top-none">
	<div class="container">
		<div class="row">
			<div class="col-lg-4 col-sm-6 sm-padding">
				<div class="service-content text-center">
					<img src="img/icon-1.png" alt="icon">
					<h3>Bitcoin Transaction</h3>
					<p>Launch your campaign and benefit from our expertise on designing.</p>
				</div>
			</div><!-- Service 1 -->
			<div class="col-lg-4 col-sm-6 sm-padding">
				<div class="service-content text-center">
					<img src="img/icon-2.png" alt="icon">
					<h3>Instant Exchange</h3>
					<p>Launch your campaign and benefit from our expertise on designing.</p>
				</div>
			</div><!-- Service 2 -->
			<div class="col-lg-4 col-sm-6 sm-padding">
				<div class="service-content text-center">
					<img src="img/icon-3.png" alt="icon">
					<h3>Investment Banking</h3>
					<p>Launch your campaign and benefit from our expertise on designing.</p>
				</div>
			</div><!-- Service 3 -->
		</div><!-- /.row -->
	</div>
</section><!-- /.service-section -->


4) Content Section - top


<section id="about" class="content-section padding pd-top-none">
   <div class="bg-shape"></div>
	<div class="container">
		<div class="row content-wrap align-items-center">
		   <div class="col-md-6 sm-padding">
				<div class="content-details">
					<h2>We are leading international <br>digital currency  agency</h2>
					<p>This should be used to tell a story and let your users know a little more about your product or service. How can you benefit them? convince them to use your service.</p>
					<ul class="content-list">
						<li>We Are Passionate And Creative</li>
						<li>Open Source And Free Software</li>
						<li>Very Fast And Reliable</li>
					</ul>
					<a href="#" class="default-btn">Learn More</a>
				</div>
			</div><!-- Content Details -->
			<div class="col-md-6 sm-padding">
				<img src="img/content-1.png" alt="image">
			</div><!-- Image -->
		</div><!-- /.content-wrap -->
	</div>
</section><!-- /.content-section -->


5) Working Process - top


<section class="work-process padding pd-top-none">
	<div class="container">
		<div class="row">
			<div class="col-lg-3 col-sm-6 sm-padding">
				<div class="work-process-content text-center">
					<img src="img/icon-4.png" alt="icon">
					<h3>Create Account</h3>
				</div>
				<div class="arrows"></div>
			</div><!-- Item 1 -->
			<div class="col-lg-3 col-sm-6 sm-padding">
				<div class="work-process-content text-center">
					<img src="img/icon-5.png" alt="icon">
					<h3>Verify Account</h3>
				</div>
				<div class="arrows"></div>
			</div><!-- Item 2 -->
			<div class="col-lg-3 col-sm-6 sm-padding">
				<div class="work-process-content text-center">
					<img src="img/icon-6.png" alt="icon">
					<h3>Make Identification</h3>
				</div>
				<div class="arrows"></div>
			</div><!-- Item 3 -->
			<div class="col-lg-3 col-sm-6 sm-padding">
				<div class="work-process-content text-center">
					<img src="img/icon-2.png" alt="icon">
					<h3>Exchange crypto currency</h3>
				</div>
			</div><!-- Item 4 -->
		</div><!-- /.row -->
	</div>
</section><!-- /.work-process -->


6) Content Section 2 - top


<section class="content-section padding pd-top-none">
	<div class="container">
		<div class="row content-wrap align-items-center">
		   <div class="col-md-6 sm-padding">
				<img src="img/content-2.png" alt="image">
			</div>
		   <div class="col-md-6 sm-padding">
				<div class="content-details">
					<h2>Banking platform that <br>enables currency solutions.</h2>
					<p>This should be used to tell a story and let your users know a little more about your product or service. How can you benefit them? convince them to use your service.</p>
					<a href="#" class="default-btn">Learn More</a>
				</div>
			</div>
		</div><!-- /.content-wrap -->
	</div>
</section><!-- /.content-section --> 


7) Testimonial Section - top


<section id="reviews" class="testimonial-section padding pd-top-none">
	<div class="bg-shape"></div>
	<div class="container">
		<div class="section-heading text-center mb-40">
		   <span>Reviews</span>
		   <h2>What Our Clients Says</h2>
		</div><!-- /.section-heading -->
		<div id="testimonial-carousel" class="testimonial-carousel owl-carousel">
			<div class="testimonial-item">
				<div class="clients-thumb"><img src="img/testi-1.jpg" alt="profile"></div>
				<div class="testi-content">
					<p>Mathematics as an expression of the human mind reflects the active will, the contemplative reason, and the desire for perfection</p>
					<h4>Angelina Rose <span>CEO Machanical Inc.</span></h4>
				</div>
			</div><!-- /.testimonial-item -->
			<div class="testimonial-item">
			   <div class="clients-thumb"><img src="img/testi-2.jpg" alt="profile"></div>
			   <div class="testi-content">
					<p>Mathematics as an expression of the human mind reflects the active will, the contemplative reason, and the desire for perfection</p>
					<h4>Michel Brown <span>CEO Industrial Inc.</span></h4>
				</div>
			</div><!-- /.testimonial-item -->
			<div class="testimonial-item">
				<div class="clients-thumb"><img src="img/testi-3.jpg" alt="profile"></div>
				<div class="testi-content">
					<p>Mathematics as an expression of the human mind reflects the active will, the contemplative reason, and the desire for perfection</p>
					<h4>Melania Trump <span>CEO Construction Inc.</span></h4>
				</div>
			</div><!-- /.testimonial-item -->
		</div><!-- /.testimonial-carousel -->
	</div>
</section><!-- /.testimonial-section -->


8) Download Section - top


<section id="download" class="download-section">
	<div class="bg-shape"></div>
	<div class="container">
		<div class="row">
			<div class="col-lg-6">
				<div class="download-content padding pd-top-none">
					<span>Download app</span>
					<h2>Enros app for better crypto <br>currency platform.</h2>
					<p>This should be used to tell a story and let your users know a little more about your product or service. How can you benefit them? convince them to use your service.</p>
					<div class="dl-btn">
						<a href="#"><img src="img/appstore.png" alt="button"></a>
						<a href="#"><img src="img/playstore.png" alt="button"></a>
					</div>
				</div>
			</div>
			<div class="col-lg-6"></div>
			<div class="dl-moc d-none d-lg-block"></div>
		</div><!-- /.row -->
	</div>
</section><!-- /.download-section -->


9) Sponsor Section - top


<div class="sponsor-section padding">
	<div class="container">
		<ul id="sponsor-carousel" class="sponsor-carousel owl-carousel">
			<li class="sponsor-item">
				<img src="img/sponsor-1.png" alt="sponsor-image">
			</li>
			<li class="sponsor-item">
				<img src="img/sponsor-2.png" alt="sponsor-image">
			</li>
			<li class="sponsor-item">
				<img src="img/sponsor-3.png" alt="sponsor-image">
			</li>
			<li class="sponsor-item">
				<img src="img/sponsor-4.png" alt="sponsor-image">
			</li>
			<li class="sponsor-item">
				<img src="img/sponsor-5.png" alt="sponsor-image">
			</li>
			<li class="sponsor-item">
				<img src="img/sponsor-4.png" alt="sponsor-image">
			</li>
		</ul>
	</div>
</div><!-- /.sponsor-section -->

10) Subscribe Section - top


<section class="subscribe-section padding">
   <div class="bg-shape"></div>
	<div class="container">
		<div class="row subscribe-wrap d-flex align-items-center">
			<div class="col-lg-6 xs-padding">
				<div>
					<h2>Newslatters Subscription</h2>
					<p>This should be used to tell a story and let your users know a little more about your product or service. </p>
				</div>
			</div><!-- Content -->
			<div class="col-lg-6 xs-padding">
				<div class="subscribe-box clearfix">
					<div class="subscribe-form-wrap">
						<form action="#" class="subscribe-form">
							<input type="email" name="email" id="subs-email" class="form-input" placeholder="Enter Your Email Address...">
							<button type="submit" class="submit-btn">Subscribe</button>
							<div id="subscribe-result">
								<p class="subscription-success"></p>
								<p class="subscription-error"></p>
							</div>
						</form>
					</div>
				</div>
			</div><!-- Subscribe Box -->
		</div><!-- /.subscribe-wrap -->
	</div>
</section><!-- /.suubscribe-section -->


11) Widget Section - top


<section class="widget-section bd-bottom padding">
	<div class="container">
		<div class="row">
			<div class="col-lg-4 col-sm-6 sm-padding">
				<div class="widget-content">
					<img src="img/logo-dark.png" alt="Brand">
					<p>This should be used to tell a story and let your users know a little more about your product or service.</p>
					<ul class="widget-social">
						<li><a href="#"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#"><i class="fa fa-twitter"></i></a></li>
						<li><a href="#"><i class="fa fa-instagram"></i></a></li>
						<li><a href="#"><i class="fa fa-behance"></i></a></li>
						<li><a href="#"><i class="fa fa-youtube"></i></a></li>
					</ul>
				</div>
			</div><!-- Widget 1 -->
			<div class="col-lg-4 col-sm-6 sm-padding">
				<div class="widget-content mid-content">
					<h3>Usefull Link</h3>
					<ul class="widget-link">
						<li><a href="#">About Us</a></li>
						<li><a href="#">Our Services</a></li>
						<li><a href="#">Pricing Plan</a></li>
						<li><a href="#">Terms & Condition</a></li>
						<li><a href="#">Privecy Policy</a></li>
					</ul>
				</div>
			</div><!-- Widget 2 -->
			<div class="col-lg-4 col-sm-6 sm-padding">
				<div class="widget-content">
					<h3>Contact Us</h3>
					<ul class="widget-link">
						<li><i class="ti-location-pin"></i>05 Koontz Lane, North South, United States.</li>
						<li><i class="ti-email"></i>information@gmail.com</li>
						<li><i class="ti-headphone"></i>+08 (123) 456 99</li>
					</ul>
				</div>
			</div><!-- Widget 3 -->
		</div>
	</div>
</section><!-- /.widget-section -->


12) Footer Section - top


<footer class="footer-section align-center">
	<div class="container">
		<p>© 2019 Enros Powered by TeamXcel</p>
	</div>
</footer><!-- /.footer-section -->



C) CSS Files and Structure - top

These are the css files:

  1. bootstrap.min.css (This is Bootstrap css file)
  2. font-awesome.min.css (The css is used for support elegant Icons.)
  3. venobox.css (The css is used for styling the magnific popup lightbox. )
  4. main.css (This is the main css file of the template)
  5. responsive.css (The css is used for responsive template)

 


D) JavaScript - top

This theme use these Javascript files:

  1. jQuery
    jQuery is a Javascript library that greatly reduces the amount of code that you must write. jQuery use these javascript files:
    smooth-scroll.min.js
    venobox.min.js
    bootstrap.min.js
    jquery-1.12.4.min.js
    imagesloaded.pkgd.min.js
    main.js
                
    You can edit the contact.js files. for setting contact form


F) Sources and Credits - top

  1. Bootstrap 3.3
  2. Veno Box
  3. Smooth Scroll


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

TeamXcel

Go To Table of Contents